<template>
  <div class="zero-drift tapStyle secondary-page-mode">
    <div class="secondary-toolbar">
      <span>数据更新时间: {{ refreshTime }}</span> &emsp;
      <span class="timing-text"><b>{{ timing }}</b>S后</span>&nbsp;
      <el-button @click="refreshDate"><i class="el-icon-refresh" ></i>刷新</el-button>
    </div>
    <div class="currency-mode-wrap">
          <div class="tablebox" style="height: 100%">
            <el-table
              :data="tableData"
              border
              height="100%"
              style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                width="50">
              </el-table-column>
              <el-table-column
                prop="city"
                label="城市">
              </el-table-column>
              <el-table-column
                prop="siteName"
                label="站点名称">
              </el-table-column>
              <el-table-column
                prop="parameterState"
                label="参数状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.parameterState === 0" class="abnormal"><i></i>参数异常</span>
                  <span v-if="scope.row.parameterState === 1" class="normal"><i></i>正常</span>
                  <span v-if="scope.row.parameterState === 2">-</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="equipmentState"
                label="设备状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.equipmentState === 0" class="fault"><i></i>设备故障</span>
                  <span v-if="scope.row.equipmentState === 1" class="normal"><i></i>正常</span>
                  <span v-if="scope.row.equipmentState === 2">-</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="connectionState"
                width="220"
                label="连接状态">
                <template slot-scope="scope">
                  <span>COD:</span>
                  <span v-if="scope.row.connectionState[0] === 0" class="abnormal"><i></i>异常</span>
                  <span v-if="scope.row.connectionState[0] === 1" class="normal"><i></i>正常</span>
                  <span v-if="scope.row.connectionState[0] === 2"> -</span>&emsp;
                  <span>氨氮:</span>
                  <span v-if="scope.row.connectionState[1] === 0" class="abnormal"><i></i>异常</span>
                  <span v-if="scope.row.connectionState[1] === 1" class="normal"><i></i>正常</span>
                  <span v-if="scope.row.connectionState[1] === 2">-</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="communication"
                label="通讯状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.communication === 0" class="abnormal"><i></i>异常</span>
                  <span v-if="scope.row.communication === 1" class="normal"><i></i>正常</span>
                  <span v-if="scope.row.communication === 2">-</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="feedback"
                label="反馈情况">
              </el-table-column>
              <el-table-column
                prop="solidifying"
                label="固化情况">
              </el-table-column>
            </el-table>
          </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "",
    data() {
      return {
        timing:60,//倒计时秒数
        timingTimer: null,
        refreshTime:new Date().format('yyyy-MM-dd hh:mm:ss'),//页面数据刷新时间
        tableData:[{
          city:'德州',
          siteName:'东麦兹皮',
          parameterState:0,
          equipmentState:0,
          connectionState:[1,0],
          communication:1,
          feedback:'',
          solidifying:'已固化',
        },{
          city:'济南',
          siteName:'瑞泉',
          parameterState:1,
          equipmentState:1,
          connectionState:[0,1],
          communication:0,
          feedback:'',
          solidifying:'未固化',
        },{
          city:'淄博',
          siteName:'阳煤一化',
          parameterState:2,
          equipmentState:2,
          connectionState:[2,2],
          communication:2,
          feedback:'',
          solidifying:'未固化',
        }],
      };
    },
    methods:{
      //点击刷新按钮直接刷新数据
      refreshDate(){
        clearInterval(this.timingTimer);//清除倒计时定时器
        this.timing = 60;//重置刷新时间
        this.countDown();//刷新数据后开启倒计时函数
        this.refreshTime = new Date().format('yyyy-MM-dd hh:mm:ss');//更新页面数据刷新时间
      },
      //倒计时60s
      countDown(){
        this.timingTimer = setInterval(()=>{
          if(this.timing === 0){
            this.timing = 60;
          }else{
            this.timing--;
          }
        },1000);
      }
    },
    mounted(){
      // this.createdChart();
      this.countDown();
    },
    created() {
      this.$store.commit("setShowlefttree", true);
    },
    beforeDestroy(){
      clearInterval(this.timingTimer);
    }
  };
</script>

<style scoped lang="less">
 .zero-drift .currency-mode-wrap{
    padding: 0;
    border: none;
  }
  .timing-text{
    font-size: 16px;
    b{
      display: inline-block;
      width: 24px;
    }
  }
  .fault,.abnormal,.normal{
    i{
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 2px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #c64522;
      margin-right: 3px;
    }
  }
  .abnormal i{
      background: #c64522;
  }
  .normal i{
      background: #67c622;
  }
 .fault i{
   background: #dfae1c;
 }
</style>

